<template>
  <div style="height: 100%">
    <el-row class="nav">
      <span class="font-weight">自定义菜单</span>
    </el-row>
    <el-divider style="margin-bottom:10px;"></el-divider>
    <el-row>
      <div class="font-weight">
        <el-button
              type="text"
              class="handle-pointer"
              :class="[ optionType === '1' ? 'type-menu' :'menu-color']"
              size="medium"
              @click="changeType('1')">类型菜单</el-button>
        <el-button
              type="text"
              class="filter-button handle-pointer"
              :class="[ optionType === '2'? 'type-menu' :'menu-color']"
              size="medium"
              @click="changeType('2')">&nbsp;|&nbsp;&nbsp;过滤器菜单</el-button>
      </div>
    </el-row>
    <el-row>
      <typeMenu v-if="optionType === '1'"></typeMenu>
      <filterMenu v-if="optionType === '2' "></filterMenu>
    </el-row>
  </div>
</template>

<script>
import typeMenu from './typeMenu'
import filterMenu from './filterMenu'
export default {
  data () {
    return {
      optionType: this.$store.state.optionType,
    }
  },
  components: {
    typeMenu,
    filterMenu
  },
  methods: {
    search () {
    },
    create () {
    },
    changeType (data) {
      this.optionType = data
      this.$store.commit('optionTypeFun', data)
    }
  }
}
</script>
<style scoped>
.title {
  padding: 12px 20px;
  color: #b50029;
}
.search {
  margin-left: 20px;
}
.type-menu{
  font-weight: 600;
}
.menu-color {
  color: #8f8f91;
  font-weight: normal;
}
>>> .el-button > i {
  font-size: 13px;
  margin-right: 10px;
}
.filter-button {
  margin-left: 0;
}
.el-pagination {
  text-align: right;
}
.font-weight {
  margin-bottom: 20px;
}
.handle-pointer {
  cursor: pointer;
}
</style>
